<template>
  <div class="page-profile-edit">
    <!-- <div class="label-switch-box">
			<span>label: </span>
			<el-radio-group v-model="labelPosition" size="small">
				<el-radio-button label="left">Left</el-radio-button>
				<el-radio-button label="right">Right</el-radio-button>
				<el-radio-button label="top">Top</el-radio-button>
			</el-radio-group>
		</div> -->

    <el-form ref="form" :model="profile" label-width="120px" :label-position="labelPosition">
      <el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
          <el-form-item label="邮箱">
            <el-input v-model="profile.email" type="email" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
          <el-form-item label="电话">
            <el-input v-model="profile.phonenumber" placeholder="+xx xxx xxx xxxx" />
          </el-form-item>
        </el-col>
      </el-col>
      <el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
          <el-form-item label="生日">
            <el-date-picker type="date" placeholder="Pick a date" v-model="profile.birthdate" style="width: 100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
          <el-form-item label="性别">
            <el-radio-group v-model="profile.gender">
              <el-radio border :label="1">男</el-radio>
              <el-radio border :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col>
        <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
          <el-form-item label="爱好">
            <el-select class="select-wide" v-model="selectedhobbies" multiple filterable allow-create default-first-option placeholder="选择你的爱好">
              <el-option v-for="item in hobbies" :key="item" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col class="col-p">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ProfileEdit",
  props: ["profile"],
  data() {
    return {
      hobbies: ["跑步", "听音乐", "打篮球", "玩游戏"],
      labelPosition: "right",
    };
  },
  methods: {
    onSubmit() {
      console.log(this.profile);
      axios
        .post("/api/account/updateprofile", this.profile)
        .then((response) => {
          console.log(response.data);
          this.$message({
            type: "success",
            message: response.data.message,
          });
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
    resizeLabelPosition() {
      if (window.innerWidth <= 768) {
        this.labelPosition = "top";
      }
    },
  },
  computed: {
    selectedhobbies: {
      set: function(value) {
        this.profile.hobbies = value.join(",");
      },
      get: function() {
        if (this.profile.hobbies && this.profile.hobbies.length > 0) {
          return this.profile.hobbies.split(",");
        } else {
          return [];
        }
      },
    },
  },
  mounted() {
    this.resizeLabelPosition();
    window.addEventListener("resize", this.resizeLabelPosition);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeLabelPosition);
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/_variables";

.page-profile-edit {
  .label-switch-box {
    display: block;
    clear: both;
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
  }
  .col-p {
    padding: 0 10px;
    box-sizing: border-box;
  }
  .select-wide {
    width: 100%;
  }
  margin: 20px;
}
</style>
